import React from 'react';
import {WeaSearchGroup, WeaFormItem, WeaInput, WeaLocaleProvider, WeaCheckbox} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import ELinkMode from './base/ELinkMode';

// 股票元素
export default class Content_19 extends React.Component {
    state = {
        eStockImageSize: this.props.eStockImageSize,
        eStockCode: this.props.eStockCode,
        eAutoSwitch: this.props.eAutoSwitch || '1',
        eSpeedSwitch: this.props.eSpeedSwitch || 3000,
    };

    render() {
        const {eStockImageSize, eStockCode, eAutoSwitch, eSpeedSwitch} = this.state;

        let EStockImageSize = '';
        let EStockCode = '';
        let EAutoSwitch = '';
        let ESpeedSwitch = '';

        if (this.props.eShareLevel == '2') {
            EStockImageSize = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0phq4q`} label={getLabel(386564, '图片大小')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <span>{getLabel(386529, '宽度：')}</span>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@uqnnxy`} value={eStockImageSize.width} style={{width: '40px', marginRight: '8px'}} onChange={value => this.setState({eStockImageSize: {...eStockImageSize, width: value}})}/>
                    <span>{getLabel(386530, '高度：')}</span>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@2k82cu`} value={eStockImageSize.height} style={{width: '40px', marginRight: '8px'}} onChange={value => this.setState({eStockImageSize: {...eStockImageSize, height: value}})}/>
                </WeaFormItem>
            );

            EStockCode = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ifgqpp`} label={getLabel(20048, '股票代码')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@losnaj`} value={eStockCode} style={{width: '80%'}} onChange={value => this.setState({eStockCode: value})}/>
                    <div>{getLabel(386565, '多股票请用半角分号分隔（SHA:000001;SHE:399001）')}</div>
                </WeaFormItem>
            );
        }

        EAutoSwitch =(
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pd00vz`} label={'自动切换'} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@oy84x7`}
                    value={eAutoSwitch}
                    display="switch"
                    onChange={value => this.setState({eAutoSwitch: value})}
                    style={{display: 'inline'}}
                />
            </WeaFormItem>
        );

        ESpeedSwitch=(
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qku2sb`} label={'切换速度'} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@j3808l`} value={eSpeedSwitch} style={{width: '10%', float: 'left'}} onChange={value => this.setState({eSpeedSwitch: value})}/>
                <span style={{float: 'left', marginTop: '5px'}}>ms</span>
            </WeaFormItem>
        );
        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@45zfjl`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@ei3uch`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@eswc4p`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    <ELinkMode ecId={`${this && this.props && this.props.ecId || ''}_ELinkMode@thiw2m`} ref="eLinkMode" options={this.props.eLinkMode.options} value={this.props.eLinkMode.selected}/>
                    {EStockImageSize}
                    {EStockCode}
                    {EAutoSwitch}
                    {eAutoSwitch == '1' && ESpeedSwitch}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentLinkMode: this.refs['eLinkMode'].getSaveValues(),
            eContentStockImageSize: this.state.eStockImageSize,
            eContentStockCode: this.state.eStockCode,
            eContentAutoSwitch: this.state.eAutoSwitch,
            eContentSpeedSwitch: this.state.eSpeedSwitch,
        };
    }

}